"use client";
import { GameInfo } from "@/api/home";
import { useRouter } from "@/i18n/routing";
import { server } from "@/utils/client";
import { useTranslations } from "next-intl";
import Script from "next/script";
import { FC, useEffect, useRef,useState } from "react";

interface Props {
    brand_id: string;
    token: string;
}
//  dedprz | deepwin365 | damslots | chips |   deloro-casino
const SportsClient: FC<Props> = (props) => {
    const t = useTranslations("ProfilePage");
    const { brand_id, token } = props;
    const [currentToken, setCurrentToken] = useState(token);


    const btRef = useRef(null);
    const router = useRouter();
    const getGameDetailApi = async () => {
        const data = await server
            .request<GameInfo>({
                url: "/v1/api/front/game_info_by_id",
                method: "post",
                data: { id: "sportsBet", mode: 1 },
            })
            .then((res) => {
                if (res.code === 200) {
                  setCurrentToken(res.data.game_url)
                  return res.data.game_url;
                } else {
                  return "";
                }
            });
        return data;
    };

    const onLoad = () => {
        // @ts-ignore
        const bt = new BTRenderer();
        btRef.current = bt;
        console.log("btRef===>444", btRef)
        bt.initialize({
            brand_id: brand_id,
            token: token,
            onTokenExpired: getGameDetailApi,
            onSessionRefresh: () => router.refresh(),
            themeName: "default",
            lang: "pt-br",
            target: document.getElementById("betby"),
            betSlipOffsetBottom: 80,
            // betSlipOffsetRight: 750,

            betSlipZIndex: 1000,
            stickyTop: 0,
            betSlipOffsetTop: 50,
            onRecharge: function () {
                router.push("/deposit");
            },
            onRouteChange: function () {
              console.log("token===>5555", token)
            },
            onLogin: function () {},
            onRegister: function () {},
            onBetSlipStateChange: function () {},
        });
    };

    useEffect(() => {
     
        updateToken(token);
        
        // return () => {
        //     // @ts-ignore
        //     btRef.current?.kill();
        // };
    }, [token]);

    const updateToken = (token: string) => {
      // @ts-ignore
        console.log("token===>333",window.BTRenderer)
        if(currentToken!== token){
          // setCurrentToken(token);
        }
         // @ts-ignore
         if (window.BTRenderer) {
          onLoad();
        }
    }


    return (
        <>    
          <div id="betby" className={"h-[100%]"}>
          </div>

          <Script src={"https://ui.invisiblesport.com/bt-renderer.min.js"} onLoad={onLoad} />
        </>
    );
};

export default SportsClient;